<%-- 
    Document   : session
    Created on : Oct 17, 2011, 10:23:43 AM
    Author     : javierpanchi
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" import="edu.uq.comp7705.entity.presentation.FacebookUser"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
    <head> 
        <title>Friends.</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
        <script type="text/javascript" src="/Drinkmeter/js/general.js"></script>
        <link rel="stylesheet" href="/Drinkmeter/css/TabStyle.css">
    </head> 

    <body onload="">

        <div data-role="page">
            <div data-role="header">
                <h1>Friends</h1>
            </div><!-- /header -->

            <div data-role="content">
                
                <form name="form1" method="post" id="form1">
                    <table>
                        <tr>
                            <td>Where are you?:</td>
                            <td><input type="text" name="place" id="place"/></td>
                        </tr>
                        <tr>
                            <td>What is the occasion?:</td>
                            <td><input type="text" name="description" id="description"/></td>
                        </tr>
                        <tr>
                            <td>Select Friends</td>
                            <td><div data-role="fieldcontain">
                                    <select name="facebookid" id="facebookid" onchange="createFBElement()">
                                        <option value="0">friends</option>
                                        <c:forEach var='person' items='${facebookList}'>
                                            <option value="${person.id}">${person.name}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr><td>
                                
                            </td></tr>
                        <tr><td colspan="2">
                                <div id="facebook"><br/>
                                    <c:choose>
                                        <c:when test="${empty sessionDrink}">
                                            <img src='https://graph.facebook.com/${person.facebookid}/picture'/><input type='hidden' name='idFacebook' value='${person.facebookid}|${person.name}'/>
                                        </c:when>
                                        <c:otherwise>
                                            <c:forEach var='session' items='${sessionDrink}'>
                                                <img src='https://graph.facebook.com/${session.facebookid}/picture'/><input type='hidden' name='idFacebook' value='${session.facebookid}|${session.nameFacebook}'/>
                                                </c:forEach>
                                        </c:otherwise>
                                    </c:choose>
                                </div>    
                            </td></tr>
                    </table>

                </form>

                <div style="top: 315px;" class="ui-loader ui-body-a ui-corner-all"><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div>
                
            </div><!-- /content -->
            
        </div><!-- /page -->
        <footer>
                    <div id='tabbarcontainer'>
                        <ul id='tabbar'>
                            <a href="javascript:sendInfo()">Create Session</a>
                            <div id="mensajes"></div>
                            <li class='tab'><a href="#" id='tab_home' onclick="window.location='/Drinkmeter'">Tab 1</a></li>
                            <li class='tab'><a href="#" id='tab_friends'>Tab 2</a></li>
                            <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/jsp/drinks.jsp'" id='tab_drinks'>Tab 3</a></li>
                            <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/DrinksServlet?opt=report'" id='tab_stats'>Tab 4</a></li>
                            <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/jsp/leave.jsp'" id='tab_locations'>Tab 5</a></li>
                        </ul>
                    </div>
                    <script type='text/javascript'>
                        $('li.tab a').bind('click', function(event) {
                            $('li.tab a').removeClass('active');
                            $(event.target).addClass('active');
                        });
                    </script>
                </footer>
    </body>
</html>